import annoucement from "@/assets/image/icons/annoucement.svg";
import arrowLeft from "@/assets/image/icons/arrow-left.svg";
import arrowRight from "@/assets/image/icons/arrow-right.svg";
import { Card, Modal } from "antd";
import React, { useState } from "react";
import { Announcement } from "../../pages/home/home-announcements/types";
import "./index.less";
//import discount from "@/assets/image/icons/discount.svg";
import weather from "@/assets/image/icons/weather.svg";
import { StyledAgree, StyledCancel } from "@/components/button";
import dateUtil from "@/utils/dateUtils";

interface AnnouncementsCardProps {
  // 是否是首页
  isHome?: boolean;
  announcements: Announcement[];
}

const AnnouncementsCard: React.FC<AnnouncementsCardProps> = ({
  announcements,
  isHome = false,
}) => {
  // 控制模态框的显示状态
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 当前展示的公告详情
  const [currentAnnouncement, setCurrentAnnouncement] =
    useState<Announcement>();
  // 当前公告在列表中的索引
  const [currentIndex, setCurrentIndex] = useState(0);

  const showModal = (announcement: Announcement, index: number) => {
    setIsModalOpen(true);
    setCurrentAnnouncement(announcement);
    setCurrentIndex(index);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const previous = () => {
    if (currentIndex === 0) return;
    const newIndex = currentIndex - 1;
    setCurrentAnnouncement(announcements[newIndex]);
    setCurrentIndex(newIndex);
  };

  const next = () => {
    if (currentIndex === announcements.length - 1) return;
    const newIndex = currentIndex + 1;
    setCurrentAnnouncement(announcements[newIndex]);
    setCurrentIndex(newIndex);
  };
  const renderCardTitle = (announcement: Announcement) => {
    return (
      <div className="announcements-card-detail">
        <div className="bgImg">
          {/* todo */}
          {announcement.status && (
            <img className="img" src={weather} alt="icon" />
          )}
        </div>
        <div className="announcements-card-title">
          {announcement.startDate && (
            <div className="date">
              {dateUtil.strToDate(announcement.startDate.toString())}
            </div>
          )}
          {announcement.annTitle && (
            <div className="content">{announcement.annTitle}</div>
          )}
        </div>
      </div>
    );
  };

  const renderAnnouncements = () => {
    // 新增：安全校验，确保是数组类型
    const safeAnnouncements = Array.isArray(announcements) ? announcements : [];

    return isHome
      ? safeAnnouncements.slice(0, 3).map(
          (
            announcement,
            index // 改为使用safeAnnouncements
          ) => (
            <div key={index} className="announcement-card">
              <Card
                title={renderCardTitle(announcement)}
                extra={
                  <div
                    onClick={() => showModal(announcement, index)}
                    className="views-details"
                  >
                    View Details
                  </div>
                }
              >
                {/* {announcement.annDescription && (
                <div>{announcement.annDescription}</div>
              )} */}
              </Card>
            </div>
          )
        )
      : safeAnnouncements.map(
          (
            announcement,
            index // 改为使用safeAnnouncements
          ) => (
            <div key={index} className="announcement-card">
              <Card
                title={renderCardTitle(announcement)}
                extra={
                  <div
                    onClick={() => showModal(announcement, index)}
                    className="views-details"
                  >
                    View Details
                  </div>
                }
              >
                {announcement.annDescription && (
                  <div>{announcement.annDescription}</div>
                )}
              </Card>
            </div>
          )
        );
  };

  return (
    <>
      <div style={{ margin: 0 }}>{renderAnnouncements()}</div>
      <Modal
        width={"80%"}
        title=""
        className="view-details-Modal"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
      >
        <div className="modal-header">
          <div className="bgImg">
            <img className="img" src={annoucement} alt="icon" />
          </div>
          <div className="modal-title">
            <div className="date">
              {dateUtil.strToDate(currentAnnouncement?.startDate ?? "")}
            </div>
            <div className="views-title">{currentAnnouncement?.annTitle}</div>
          </div>
        </div>
        <div className="modal-content">
          {currentAnnouncement?.annDescription}
        </div>
        <div className="modal-footer">
          <StyledCancel className="pre-button" onClick={previous}>
            <img className="arrowLeft" src={arrowLeft} alt="icon" />
            Previous
          </StyledCancel>
          <span className="page-number">
            {currentIndex + 1}/{announcements.length}
          </span>
          <StyledAgree className="next-button" onClick={next}>
            Next
            <img className="arrowRight" src={arrowRight} alt="icon" />
          </StyledAgree>
        </div>
      </Modal>
    </>
  );
};

export default AnnouncementsCard;
